<template>
  <div class="login">
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="username"
          name="用户名"
          :label="$t('login.username')"
          :placeholder="$t('login.username')"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />

        <van-field
          v-model="password"
          type="password"
          name="密码"
          :label="$t('login.password')"
          :placeholder="$t('login.password')"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>

      <div class="tologin">
        <van-popover
          v-model:show="showPopover"
          :actions="actions"
          @select="onSelect"
        >
          <template #reference>
            <van-button type="primary">{{
              $t("login.select_a_language")
            }}</van-button>
          </template>
        </van-popover>
        <div style="margin: 16px">
          <van-button
            class="login-btn"
            round
            block
            type="primary"
            native-type="submit"
            @click="send"
          >
            {{ $t("login.tologin") }}
          </van-button>
        </div>
      </div>
    </van-form>
  </div>
</template>

<script setup lang="ts">
  import login from "../../api/login";
  import { ref } from "vue";
  import { useRouter } from "vue-router";
  import { showToast } from "vant";
  import useStore from "../../store/index";
  import { useI18n } from "vue-i18n";

  const sotre = useStore();
  const router = useRouter();
  const username = ref("");
  const password = ref("");

  const onSubmit = (values: any) => {
    console.log("submit", values);
  };

  const send = () => {
    login
      .getlogin({
        platformType: "china",
        password: "123456",
        username: "18903639836",
      })
      .then((res: any) => {
        console.log(res);
        router.replace("/home");
      });
  };

  const showPopover = ref(false);

  const actions = [
    { text: "中文", },
    {
      text: "English",
      
    },
  ];

  const { locale } = useI18n({});

  const onSelect = (action: any) => {
    showToast(action.text);

    sotre.chnageLanguage(action.text);

    const lang = localStorage.getItem("locale") as any;

    locale.value = lang;
    
   
  };
</script>

<style scoped lang="scss">
  .login {
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;

    .van-form {
      width: 80vw;
      display: flex;
      flex-direction: column;
      align-items: center;

      .tologin {
        display: flex;
        justify-content: center;
        align-items: center;

        width: 100%;

        .login-btn {
          width: 200px;
        }
      }
    }
  }
</style>
